<script setup>
import { onMounted } from "vue";
import {logout} from "@/utils/auth.js";
import NavBar from "@/components/NavBar/index.vue";

function navigateToMe() {
  uni.switchTab({
    url: "/pages/Me/index",
  });
}

async function handleLogout () {
  await logout();
  uni.navigateTo({
    url: "/pages/Login/index",
  });
}
</script>

<template>
  <div class="container">
    <NavBar></NavBar>
    <div @click="navigateToMe" class="back-nav">
      <image
        src="@/static/icon/chevron-left.png"
        style="width: 14px; height: 14px"
      ></image>
      <text>设置</text>
    </div>
    <div class="op">
      <button class="op-btn" @click="handleLogout">退出登录</button>
    </div>
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
}

.back-nav {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
}

.op {
  width: 100%;
  position: fixed;
  bottom: 40px;
  margin-left: -20px;
  padding: 0 20px;
  box-sizing: border-box;
}

.op-btn {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px 0 0 0;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  border-radius: 10px;
  box-sizing: border-box;
}
</style>
